<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../utils/flexible.js"></script>
</head>
<style>
    *{margin:0;
        padding:0;
       box-sizing: border-box;
       list-style: none;
       
       }
       ::-webkit-scrollbar {
            display:none};
       a{display:block;}*
         #header{
           background:#1d6dff;
           height: 1.3333rem;
           /* padding: .1333rem; */
           text-align: center;
           overflow: hidden;
       }
   
       #header .left {
           margin-top: .1333rem;
           text-align: center;
           font-size: .5333rem;
           color: #fff;
           float: left;
           text-decoration: none;
       }
       #header h4{
           display: inline-block;
           text-align: center;
           font-size: .5333rem;
   
           font-weight: bolder;
           color: #fff;
           margin-top: .2667rem;
           margin-bottom: .2667rem;
       }
        #header .right {
            float: right;
            padding: 0.1867rem;
       }
       #header .right a{
           color: #666;
           text-decoration: none;
       }
       #header .right a img{
           height: .9067rem;
           vertical-align: center;
       }
       .nav{
           overflow-x:auto;
           white-space:nowrap;
           /* height:.6rem; */
       }
       .nav li{
           display:inline-block;
           /* height: .8rem; */
           padding-left: .93rem;
           padding-right: .93rem;
           margin-right: .3rem;
           /* float:left; */
           vertical-align: middle;
       }
       .nav li a{
           text-decoration: none;
           color: black;
           font: .5rem/2rem;
       }
       .product{
           margin-bottom: .2667rem;
       }
       .product li{
           padding: .2667rem .2133rem;
           margin-bottom: .1333rem;
           height: 4.1557rem;
       }
       .product li a:hover{
           color:#666;
       }
       .product li a .f1{
           float:left;
       }
       .product li a .f1 img{
           width: 3.6rem;
           height: 3.4667rem;
           padding-right: .2667rem;
           vertical-align: middle;
       }
       .product li a .infor{
           padding-left: 3.6rem;
       }
       .product li a .infor .title h4{
          color:black;
          word-break: break-all;
          font-size: .48rem;
          text-overflow: ellipsis;
          line-height: .5067rem;
          min-height: .8rem;
          text-align: left;
          font-weight: normal;
       }
       .product li a .infor .title h4 span{
           color:#ff6c00;
       }
       .product li a .infor .title .price{
           font-size: .64rem;
           color: #fc353a;
       }
       .product li a .infor .title .price em{
           font-size: .32rem;
           /* color: #fc353a; */
           font-style: normal;
       }
       .product li a .infor .title .price del{
        font-size: .32rem;
        color:#ccc;
       }
       .product li a .infor .title .down .bar{
          display: inline-block;
          margin-top: .1333rem;
          width: 3.2rem;
          border: .0267rem solid #fc353a;
          border-radius: .2667rem;
          background-color: #ffb7b7;
        overflow: hidden;
       }
       .product li a .infor .title .down .bar span{
           color: #fc353a;
           margin-left: .1333rem;
           font-weight: bold;
       }
       .product li a .infor .title .down .click{
           margin-top: .2667rem;
       }
       .footer{
           background-color:#f4f4f4;
       }
       .footer .more{
           height: 1.3333rem;
           padding: .2667rem;
       }
       .footer .more a{
           display: block;
           font-size: .3467rem;
           line-height: .8rem;
           text-align: center;
           border-radius: .1333rem;
           border: .0267rem solid #ddd;
       }
       .footer .brand{
           background-color: #1d6dff;
           margin-top: .2667rem;
           margin-bottom: .16rem;
       }
       .footer .brand span{
           color: #fff;
           display: inline-block;
           font: bolder .48rem/.9333rem;
           padding-left: .2667rem;
       }
    .footer .login .container{
           padding: 0 .4rem;
           margin: 0 auto;
       }
       .footer .login .container.row{
           height: .96rem;
           margin-top: .2667rem;
           border-top: .0267rem solid #c4c4c4;
           margin: 0 -0.4rem;
       }
       .footer .login .container.row div{
           height: .88rem;
           line-height: .88rem;
           text-align: center;
           font-size: .3733rem;
           border-right: .0267rem solid #c4c4c4;
           float: left;
       }
       .footer .login .container.row .f1{
           width: 25%;
       }
       .footer .login .container.row .f1{
           width: 33.333333%;
       }
       .footer .login .container.row .f1{
           width: 41.66666667%;
       }
       .footer .login .content{
           text-align: center;
           padding: .2667rem;
       }
       .footer .login .content p a{
           color: #666;
           text-decoration: none;
       }
</style>
<body>
    <header id="header">
        <a href="#" class="left">
            〈
        </a>
        <h4>
            白菜价-淘宝内部优惠券
        </h4>
         <div class="right">
            <a href="#"><img src="../images/header_app.png" alt="" width="34"></a>    
         </div>
    </header>
    <div class="nav">
        
    </div>
    <div class="product">

    </div>
    <div class="footer">
        <div class="more">
            <a href="#">更多优惠>></a>
        </div>
        <div class="brand">
            <span>品牌排行</span>
        </div>
        <div class="login">
        <div class="container">
            <div class="row">
              <a href="#" class="d1">登入</a>
              <a href="#" class="d2">注册</a>
              <a href="#" class="d3">返回顶部</a>
            </div>
        </div>
        </div>
        <div class="content">
            <p>
                <a href="#">手机app下载</a>
                <a href="#">万锋智慧商城手机版</a>
                "--掌上比价平台"
            </p>
            <p>chst.vip:8081/com</p>
        </div>
    </div>
</body>
</html>
<script src="../utils/utils.js"></script>
<script>
    
    let nav=document.querySelector('.nav')
    let el="";
    fetch('http://chst.vip:1234/api/getbaicaijiatitle')
    .then(body=>body.json())
    .then(res=>{
        console.log(res)
        res.result.forEach(item =>{
            el+=`
            <li > <a titleid=${item.titleId}  href="#">
            ${item.title}
            </a>
            </li>  `
        })
        nav.innerHTML=el;
    })


    nav.onclick=function (e) {
        e.preventDefault()
        console.log(e.target.localName)
        if(e.target.localName==='li'||e.target.localName==='a' ){
            let _this=e.target;
            console.log(_this)

            let id=_this.getAttribute('titleid')

            console.log(id)

         location.href='./baicaijia.html?titleid='+id
        }
    }
    let el1=""
    let id=getQueryString('titleid');
    let uu=document.querySelector('.product')
    // console.log(id)
    fetch('http://chst.vip:1234/api/getbaicaijiaproduct?titleid='+id)
    .then(body=>body.json())
    .then(res=>{
        console.log(res)
        let r=res.result;
        // console.log(r)
        r.forEach(item=>{
            // console.log(item.productName)
            el1+=`
        <li>
            <a href="#">
                <div class="f1"><img src=${item.productImg}></div>
                <div class="infor">
                    <div class="title">
                        <h4>
                            ${item.productName}
                        </h4>
                        <div class="price">
                            ${item.productPrice}
                        </div>
                    </div>
                    <div class="down">
                        ${item.productCouponRemain}
                        <div class="click">
                            <div class="left">${item.productCoupon}</div>
                            <div class="right">下单链接</div>
                            </div>
                        </div>
                </div>
            </a>
        </li>
        `
        })
       uu.innerHTML=el1
    })


</script>